<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span><my-bread>变动的文字</my-bread></span>
    </div>
    <test>
      <!-- <div slot="main" slot-scope="scope"> -->
      <template #main="scope">
        我的插槽来的11111
        <ul>
          <li v-for="item in scope.row" :key="item.uname">
            {{ item.uname }}
            <br />
            {{ scope.age }}
          </li>
        </ul>
        <!-- </div> --></template
      >
      <div slot="mm">我的插槽22222</div>
      <span>span hahahahhahah 匿名插槽</span>
      <button @click="count++">按钮{{ count }}</button>
      <button @click="user.age++">按钮{{ user.age }}</button>
    </test>
    <hr />
    <aa></aa>
    <bb></bb>
  </el-card>
</template>

<script>
// import test from '@/components/test.vue'
import aa from '@/components/a.vue'
import bb from '@/components/b.vue'
// import Vue from 'vue'
// Vue.component('test',test)
// import MyBread from "@/components/my-bread.vue";
export default {
  components: {
    aa,
    bb
    // MyBread,
  },
  data () {
    return {
      count: 0,
      tableData: [],
      form: {
        status: null,
        channel_id: '',
        begin_pubdate: null,
        end_pubdate: null
      },
      options: [
        {
          value: 1,
          label: '前端'
        }
      ],
      date: [],
      user: {
        uname: 'sss',
        age: 10
      }
    }
  },
  watch: {
    // count(newVal, oldval) {
    //   console.log("count变了",newVal,oldval);
    // },
    // 'user.age'(newVal, oldval) {
    //   console.log("user.age变了",newVal,oldval);
    // },
    user: {
      handler (newVal, oldval) {
        console.log('user变了', newVal, oldval)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style>
</style>
